
import { backgroundColors, textColors } from "@/constant";
import { useNavigation } from "@react-navigation/native";
import { memo } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

const LeftContent = () => {

  const navigation = useNavigation()
  // 判断还能不能返回
  const canGoBack = navigation.canGoBack()
  if (!canGoBack) {
    return null
  }

  return (
    <TouchableOpacity onPress={() => {
      navigation.goBack()
    }}>
      <Text className="text-lg font-bold" style={{ color: textColors.dark.accent}}>返回</Text>
    </TouchableOpacity >
  )
}

const CustomHeader = ({
  leftContent,
  rightContent,
  title,
  ...props
}: any) => {
  const insets = useSafeAreaInsets();

  return (
    <View
      className=" relative bg-indigo-50 h-20 flex-row justify-between items-center opacity-90"
      style={{ paddingTop: insets.top,backgroundColor: backgroundColors.dark.primary }}
    >
      {/* 左侧区域 */}
      <View className="flex-1 pl-4">
        {leftContent || <LeftContent />}
      </View>

      {/* 中间标题 */}
      <View className="flex-3 items-center">
        <Text className="font-bold text-2xl" style={{ color: textColors.dark.accent }}>
          {title}
        </Text>
      </View>

      {/* 右侧区域 */}
      <View className="flex-1 items-end pr-4 right-0">
        {rightContent}
      </View>
    </View>
  );
};

export default memo(CustomHeader);